<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>JpetStore</title>
    <link rel="stylesheet" href="../css/jpetstore.css" type="text/css"/>
    <link rel="stylesheet" href="../css/jquery-ui.css" type="text/css"/>
    <script th:src = "@{/JS/jquery-3.2.1.js}"></script>
    <script th:src = "@{/JS/jquery-ui.js}"></script>
</head>
<body>
    <div th:replace="/common/header.html"></div>
    <div id="Content">
        <div id="BackLink">
            <a href="/catalog/main">回到主页面</a>
        </div>
        <div id="LookOrderList">
            <a href="/order/viewListOrder">查看订单界面</a>
        </div>
        <div id="Catalog">
            <table align="center" id="viewOrderTable">

                <tr>
                    <th align="center" colspan="2">
                        <b th:text="'订单编号'+${loginAccount.order.orderId}+'完成时间'+${loginAccount.order.orderDate}"></b>
                    </th>
                </tr>
                <tr>
                    <th colspan="2">Payment Details</th>
                </tr>
                <tr>
                    <td>Card Type:</td>
                    <td th:text="${loginAccount.order.cardType}"</td>
                </tr>
                <tr>
                    <td>Card Number:</td>
                    <td th:text="${loginAccount.order.creditCard}+' * Fake number!'"></td>
                </tr>
                <tr>
                    <td>Expiry Date (MM/YYYY):</td>
                    <td th:text="${loginAccount.order.orderDate}"></td>
                </tr>
                <tr>
                    <th colspan="2">Billing Address</th>
                </tr>
                <tr>
                    <td>First name:</td>
                    <td th:text="${loginAccount.order.billToFirstName}"></td>
                </tr>
                <tr>
                    <td>Last name:</td>
                    <td th:text="${loginAccount.order.billToLastName}"></td>
                </tr>
                <tr>
                    <td>Address 1:</td>
                    <td th:text="${loginAccount.order.billAddress1}"></td>
                </tr>
                <tr>
                    <td>Address 2:</td>
                    <td th:text="${loginAccount.order.billAddress2}"></td>
                </tr>
                <tr>
                    <td>Phone:</td>
                    <td th:text="${loginAccount.order.phone}"></td>
                </tr>
                <tr>
                    <td>City:</td>
                    <td th:text="${loginAccount.order.billCity}"></td>
                </tr>
                <tr>
                    <td>State:</td>
                    <td th:text="${loginAccount.order.billState}"></td>
                </tr>
                <tr>
                    <td>Zip:</td>
                    <td th:text="${loginAccount.order.billZip}"></td>
                </tr>
                <tr>
                    <td>Country:</td>
                    <td th:text="${loginAccount.order.billCountry}"></td>
                </tr>
                <tr>
                    <td>Status:</td>
                    <td th:text="${loginAccount.order.status}"></td>
                </tr>
                <tr>
                    <td colspan="2">
                        <table id="viewOrderTable2">
                            <tr>
                                <th>Item ID</th>
                                <th>Description</th>
                                <th>Quantity</th>
                                <th>Price</th>
                                <th>Total Cost</th>
                            </tr>
                            <tr th:each="cartItem:${arrayListCart}">
                                <td>
                                    <a th:href="@{'/catalog/viewItem?itemId='+${cartItem.getItem().getItemId()}}" th:text="${cartItem.getItem().getItemId()}"></a>
                                </td>
                                <td th:text="${cartItem.item.getAttribute1()+cartItem.item.getAttribute2+
                            cartItem.item.getAttribute3()+cartItem.item.getAttribute4()+cartItem.item.getAttribute5()+
                            cartItem.item.productId}">
                                <td th:text="${cartItem.quantity}"></td>
                                <td th:text="${cartItem.item.listPrice}"></td>
                                <td th:text="${cartItem.total}"></td>
                            </tr>
                            <tr>
                                <th colspan="5" th:text="'Total'+${loginAccount.order.totalPrice}"></th>
                            </tr>
                        </table>
                    </td>
                </tr>
            </table>
    </div>
    <div th:replace="/common/footer.html"></div>
</body>
</html>